@import '../../ui/base'

.root
	border 1px solid #dde9f8
	position relative
	transition .3s
	[data-role='fieldArea']
		margin-bottom 0
.wrapper
	line-height 1
	display flex
	height 30px
	flex-direction column
	justify-content center
	position relative
	background-color #fff
	

.input
	border none
	outline none
	resize none
	margin 0
	padding 0
	font-size 14px
	line-height 16px
	padding 0 10px
	&::-webkit-input-placeholder
		font-size 12px
		color #8ca9c5

.multi
	height 30px
	.input
		height 16px
		font-size 14px

.focused
	border-color #00a0f6
	box-shadow: 0 0 4px rgba(135,185,240,.5)
	.wrapper
		justify-content space-between
		height 67px
		&.multi
			height 100px
			.input
				margin 7px 0
				height 50px
	.input
			height 29px

.blured
	border-color #dde9f8
	box-shadow none

.actions
	height 34px
	justify-content space-between
	animation-name fade-in
	animation-duration $animation-duration
	animation-timing-function $animation-curve-default
	padding 0 10px
	@extends .h-center
	align-items flex-start
	.submit
		height 24px
		font-size 12px
	.addons
		@extends .h-center
		li
			@extends .h-center
			a
				i
					color #00a0f6
			a + a
				margin-left 3px


.root
	[data-role='fieldArea']
		margin-bottom 0
	.upload
		background-color #f8f8f8
		padding 10px 20px
		display none
		border none

.showUpload
	.wrapper
		border-bottom-color #fff
	.upload
		border-color #568ae3 
		border-top-color #f8f8f8
		display block

.emoji-panel
	position: absolute;
	background: #eee;
	top: 100%;
	margin-top: 1px;
	left: -1px;
	right: -1px;
	padding: 10px;
	z-index 10
	box-shadow 1px 1px 3px rgba(117,117,117,.5)
	ul
		clear fix
		font-size 20px
	li
		float left
		margin 5px
		cursor pointer
		img
			width 18px
			height 18px

.hide-emoji
	margin-left: -10px;
	margin-right: -10px;
	margin-bottom: -10px;
	display: flex;
	justify-content: center;
	padding: 5px 0;



